<template>
  <div class="body-container layout-padding">
    <el-form label-width="120px" style="margin-bottom: 10px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="仓库名称">
            <el-input v-model="state.sd.cwhname" placeholder="仓库名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button size="default" type="primary" class="ml5" @click="searchCangKu">
            <el-icon><ele-Search /></el-icon>查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="4" v-for="(item, index) in state.cangKuList" style="margin-bottom: 10px">
        <el-card class="cangkucard">
          <p style="color: #32a99e;font-weight: bold">{{item.cwhname}}</p>
          <p>{{item.lockstatus === '1' ? '锁定' : '未锁定'}}</p>
          <p style="float: right">
            <el-button size="default" type="primary" class="ml5" @click="cangKuSetting(item.id)">
              <el-icon><ele-Setting /></el-icon>设置
            </el-button>
          </p>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="仓库人员设置" v-model="state.settingPop.cangKuId" :close-on-click-modal="false" width="960px">
      <RenyuanSetting :cangkuid="state.settingPop.cangKuId" v-if="state.settingPop.visible" v-model="state.settingPop.visible" :key="'RenYuanSetting-' + state.settingPop.cangKuId" ></RenyuanSetting>
    </el-dialog>
  </div>
</template>

<script setup name="cangkumanager">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
const RenyuanSetting = defineAsyncComponent(() => import('/@/views/kucun/cangku/renyuansetting.vue'));

const state = reactive({
  sd:{
    cwhname:'',
  },
  settingPop:{
    cangKuId:0,
    visible : 0
  },
  cangKuList : [],
})
const searchCangKu = () =>{
  request({
    url: '/cangku/searchwh',
    data: state.sd
  }).then(res => {
    const { data } = res
    state.cangKuList = data
  })
}
const cangKuSetting = (id)=>{
  state.settingPop.cangKuId = id;
  state.settingPop.visible = true
}
onMounted(()=>{
  searchCangKu();
})
onUnmounted(()=>{

})
</script>

<style scoped lang="scss">
.cangkucard{
  p{
    font-size: 14px;
    font-weight: bold;
    padding: 6px 0;
  }
}
</style>
